<template>
  <div class="lj-add-config">
    <!-- header -->
    <div class="px-[20px] flex justify-between items-center rounded-t-[10px] border-b border-[#808080]-2">
      <!-- 标题 -->
      <TitleConfig />

      <div class="flex items-center gap-0.5">
        <!-- 计算按钮 -->
        <LjButton type="success" content="计算" @click="calc" />

        <el-divider direction="vertical" />

        <LjButton type="danger" content="取消" />
      </div>
    </div>

    <!-- main -->
    <div class="main">
      <el-tabs v-model="activeName">
        <el-tab-pane label="小牵张" name="smallCard">
          <AddQianZhangCard smallWire="小引绳" bigWire="大引绳" ref="smallCard">
            <template #footer>
              <span>小张力机和小牵引机主要是配合置换引绳的作用。</span>
              <span>小张力机一般位于牵引场</span>
              <UpdateChangCard changName="N2" />
              <span>，小牵引机一般位于张力场</span>
              <UpdateChangCard changName="N1" />
              <span>。摩阻系数一般取</span>
              <UpdateMoZuXiShuCard :moZuXiShu="moZuXiShu">
                <el-input-number v-model="moZuXiShu" :max="1.03" :min="1.0" :step="0.001" size="small" class="w-full" />
              </UpdateMoZuXiShuCard>
              <span>。</span>
            </template>
          </AddQianZhangCard>
        </el-tab-pane>

        <el-tab-pane label="大牵张" name="bigCard">
          <AddQianZhangCard :isBig="true" smallWire="大引绳" bigWire="导线" ref="bigCard">
            <template #footer>
              <span>大张力机和大牵引机主要是配合展放导线的作用。</span>
              <span>大张力机一般位于张力场</span>
              <UpdateChangCard changName="N1" />
              <span>，大牵引机一般位于牵引场</span>
              <UpdateChangCard changName="N2" />
              <span>。摩阻系数一般取</span>
              <UpdateMoZuXiShuCard :moZuXiShu="moZuXiShu">
                <el-input-number v-model="moZuXiShu" :max="1.03" :min="1.0" :step="0.001" size="small" class="w-full" />
              </UpdateMoZuXiShuCard>
              <span>。本次采用的是1牵</span>
              <UpdateNumCard :num="num">
                <el-input-number v-model="num" :max="8" :min="1" :step="2" size="small" class="w-full" />
              </UpdateNumCard>
              <span>。</span>
            </template>
          </AddQianZhangCard>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup lang="ts">
import LjButton from '@/components/button/LjButton.vue'
import AddQianZhangCard from '@/components/drawer/ConfigDrawer/ConfigCard/AddConfigCard/AddQianZhangCard.vue'
import { ref } from 'vue'
import TitleConfig from '../TitleConfig.vue'
import UpdateNumCard from './UpdateCard/UpdateNumCard.vue'
import UpdateMoZuXiShuCard from './UpdateCard/UpdateMoZuXiShuCard.vue'
import UpdateChangCard from './UpdateCard/UpdateChangCard.vue'

const { zondId } = defineProps({
  zondId: { type: Number, default: 1 },
})

const emit = defineEmits(['close'])

const num = ref(2)
const moZuXiShu = ref(1.015)

const smallCard = ref()
const bigCard = ref()
const activeName = ref('smallCard')

function calc() {
  if (activeName.value === 'smallCard') {
    smallCard.value?.calConfg(activeName.value, zondId)
  } else {
    bigCard.value?.calConfg(activeName.value, zondId)
  }
}
</script>

<style scoped lang="scss">
.lj-add-config {
  @apply w-full h-[281px] grid grid-rows-[55px_1fr] font-[consola] rounded-[5px] bg-[#ecf0f1] hover:shadow-sm;
  .main {
    @apply mx-[20px]  mb-[20px];
  }
}
</style>
